@import "../../styles/mixin.scss";

.card-container {
	position: relative;
	user-select: none;
	transition: all 0.2s;

	.m-card,
	.card-btns {
		transform: translateY(0);
		transition: all 0.2s;
	}

	// 覆盖 card 组件 hover 状态的默认阴影样式
	.ant-card:not(.ant-card-no-hovering):hover {
		box-shadow: none;
	}

	// 卡片右上角按钮
	.card-btns {
		position: absolute;
		top: 16px;
		right: 16px;
		height: 16px;
		// background: linear-gradient(225deg, #ccc, #ccc 50%, transparent 0);
		border-top-right-radius: 4px;

		span {
			display: none;
			&:hover {
				color: #2395f1;
			}
		}
	}

	&:hover {
		.card-btns {
			span {
				display: inline-block;
			}
		}
	}
}

.m-card {
	cursor: pointer;
	text-align: center;
	margin-bottom: 0.16rem;
	transition: all 0.4s;
	position: relative;

	.ant-card-body {
		background-color: transparent;
		border-radius: 4px;
		padding-top: 0.24rem + 0.16rem + 1rem;
		box-shadow: 0 4px 6px rgba(255, 255, 255, 0.11),
			0 1px 3px rgba(255, 255, 255, 0.08);
		// box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
		transition: all 0.2s;
	}

	.ui-logo {
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translate(-50%, 0.24rem);
		font-size: 0.5rem;
		color: #fff;
		background-color: #2395f1;
		line-height: 1rem;
		box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
	}

	.ui-title {
		font-size: 0.19rem;
		font-weight: normal;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.m-card-body {
		.icon {
			font-size: 0.8rem;
		}

		.name {
			font-size: 0.18rem;
			margin-top: 0.16rem;
		}
	}
}

@media (max-width: 768px) {
	.m-card {
		.ui-logo {
			width: 0.6rem;
			height: 0.6rem;
			line-height: 0.6rem;
			font-size: 0.3rem;
			transform: translate(-50%, 0.08rem);
		}

		.ant-card-body {
			padding-top: 0.08rem + 0.08rem + 0.6rem;
			padding-bottom: 0.08rem;
		}
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	.m-card {
		.ui-logo {
			width: 0.8rem;
			height: 0.8rem;
			line-height: 0.8rem;
			font-size: 0.4rem;
			transform: translate(-50%, 0.16rem);
		}

		.ant-card-body {
			padding-top: 0.16rem + 0.16rem + 0.8rem;
			padding-bottom: 0.16rem;
		}
	}
}
